<template>
	<view class="info flex flex-js-sb flex-ai-c" style="padding-top: 65rpx;">
		<view class="info-left">
			<u-avatar size="168"
				:src="info.detail.images.length?info.detail.images[0]:info.detail.headavatar"></u-avatar>
		</view>
		<view class="info-right">
			<view class="font-32">{{info.detail.auth_name}}</view>
			<view class="description font-28">创始人｜{{info.detail.company}}</view>
			<view class="font-16 flex flex-ai-c">
				<view class="flex flex-ai-c" v-if="info.detail.id_number" style="margin-right: 18rpx;">
					<i-icon type="multiple" icon="shiming" size="26rpx" />
					<text style="margin-left: 8rpx;">已实名</text>
				</view>
				<view class="flex flex-ai-c" v-if="info.detail.is_luxury">
					<i-icon type="multiple" icon="shechiping" size="30rpx" />
					<text style="margin-left: 8rpx;margin-bottom: 4rpx;">奢侈品认证</text>
				</view>
			</view>
		</view>
	</view>
	<view class="info">
		<view>
			<view class="info-title">座右铭</view>
			<view class="font-24" style="margin: 20rpx 0;">
				<!-- <rich-text :nodes="info.detail.motto"></rich-text> -->
				<u-input v-model="info.detail.motto" height="40rpx" style="width: 100%;" disabled type="textarea" placeholder="暂无数据" :custom-style="{fontSize:'24rpx'}" :maxlength="500" />
			</view>
		</view>
		<view>
			<view class="info-title">关于Ta</view>
			<view class="font-24" style="margin: 20rpx 0;">
				<!-- {{info.detail.about_us}} -->
				<u-input v-model="info.detail.about_us" height="40rpx" disabled  type="textarea" placeholder="暂无数据" :custom-style="{fontSize:'24rpx'}" :maxlength="500" />
			</view>
		</view>
		<view>
			<view class="info-title">Ta能提供</view>
			<view class="font-24" style="margin: 20rpx 0;">
				<!-- {{info.detail.provide}} -->
				<u-input v-model="info.detail.provide" height="40rpx" disabled type="textarea" placeholder="暂无数据" :custom-style="{fontSize:'24rpx'}" :maxlength="500" />
			</view>
		</view>
		<view>
			<view class="info-title">近期需求</view>
			<view class="font-24" style="margin-top: 20rpx;">
				<!-- {{info.detail.demand}} -->
				<u-input v-model="info.detail.demand" height="40rpx" disabled type="textarea" placeholder="暂无数据" :custom-style="{fontSize:'24rpx'}" :maxlength="500" />
			</view>
		</view>
	</view>
	<view class="info basis">
		<view class="flex">
			<view class="info-title">基础信息</view>
			<view class="font-28 s-line-text f1">{{info.detail.star_sign}}｜家乡 {{info.detail.hometown_city}}｜常驻 {{info.detail.city}}
			</view>
		</view>
		<view class="flex">
			<view class="info-title">兴趣爱好</view>
			<view class="font-28 s-line-text f1" v-if="info.detail.hobby">{{info.detail?.hobby.join(',')}}</view>
		</view>
		<view class="flex">
			<view class="info-title">关注行业</view>
			<view class="font-28 s-line-text f1" v-if="info.detail.follow">{{info.detail?.follow.join(',')}}</view>
		</view>
		<view class="flex not">
			<view class="info-title">学历背景</view>
			<view class="font-28 s-line-text f1">{{info.detail.education}}</view>
		</view>
	</view>
	<view class="info basis flex flex-ai-c flex-jc-sb" style="padding: 20rpx 60rpx 20rpx 20rpx;">
		<u-icon name="arrow-left" style="margin: 0;" size="24rpx" />
		<scroll-view class="scroll-view" scroll-x style="height: 160rpx;">
			<view class="flex flex-ai-c" style="width: 150rpx;height: 150rpx;display: inline-block;margin: 0 5rpx;"
				v-for="(item,index) in info.detail.images" :key="index" @click.stop="preview(index)">
				<image style="height: 150rpx;width: 150rpx" :src="item" />
			</view>
		</scroll-view>
		<u-icon name="arrow-right" style="margin: 0;" size="24rpx" />
	</view>
	
	<view style="height: 160rpx;"></view>
	<view class="btn" v-if="info.nodes.add_wechat_bottion && info.detail.id != info.store_userid && info.nodes.add_wechat == 1">
		<view class="btn-text" @click="add">
			加TA微信
		</view>
	</view>


	<u-modal @cancel="info.show = false" mask-close-able :model-value="info.show" title="未开启权限"
		content="对方未开启交换微信权限，请稍后再试" title-style="font-weight:600" :show-confirm-button="false"
		:show-cancel-button="false" />

	<u-modal @cancel="info.show2 = false" :show-title="false" :model-value="info.show2" :show-confirm-button="false"
		:show-cancel-button="false">
		<view class="modal">
			<view class="u-text-center">
				确定付费给对方交换微信吗？
			</view>
			<view class="u-text-center font-bold">
				<text class="font-32">¥</text>
				<text style="font-size: 48rpx;">{{info.detail.exchange_amount}}</text>
			</view>
			<view class="u-text-center font-24 mt-40" style="font-weight: 500;">支付成功后，对方同意即可查看对方的微信号</view>
			<view class="u-text-center font-28 mt-40" style="font-weight: 400;">3天未同意，款项原路退回</view>
			<view class="wx flex flex-ai-c">
				<i-icon icon="icon-weixin" size="60rpx" />
				<text style="margin-left: 25rpx;">{{plusXing(info.detail.wechat_no||'',3,2)}}</text>
			</view>
			<view class="flex flex-jc-sb">
				<view class="cancel" @click="memberCorderCancel">
					取消
				</view>
				<view class="confirm" @click="submit">
					确 认
				</view>
			</view>
		</view>
		<view class="flex flex-jc-c flex-ai-c font-22" style="0;margin: 60rpx 0 60rpx 0;">
			<radio :checked="radioShow" color="#FF0000" @click="changeRadio" style="transform:scale(0.7)"></radio>
			<view style="color: #999999;">
				阅读并同意<text @click="sysconfig(0)" style="color: #333333;">《奢董会用户协议》</text>和<text @click="sysconfig(1)"
					style="color: #333333;">《奢董会隐私政策》</text>
			</view>
		</view>
	</u-modal>
	<loginPop :show="info.loginPopShow" @close="info.loginPopShow = false" @login="loginSuccess" />
</template>

<script lang="ts" setup>
	import {
		reactive
	} from 'vue'
	import {
		onLoad,onShow,onShareAppMessage
	} from '@dcloudio/uni-app'
	import { useStore } from 'vuex';
	import home from '../../../api/home';
	import order from '../../../api/order';
	import common from '../../../api/common';
	import loginPop from '@/components/login.vue'
	let info = reactive({
		loginPopShow: false,///登录
		isAuth: true,
		show: false,
		show2: false,
		detail: {
			images: [],
			exchange_status: 0,
			id: null,
			exchange_amount: 0
		},
		order_id: null,
		nodes: {
			add_wechat: 0,
			add_wechat_bottion: 0
		},
		store_userid: uni.getStorageSync('userInfo').id,
		radioShow: false,
		id:  null
	})
	const store = useStore()
	//登录
	const loginSuccess = (token : string) => {
		
	}
	onShareAppMessage(() => {
		store.commit('otherid',info.id)
	})
	const sysconfig = (type : number) => {
		uni.navigateTo({
			url: `/pages/common/sysconfig?type=${type}`
		})
	}
	const changeRadio = () => {
		info.radioShow = !info.radioShow
	}
	const memberCorderCancel = () => {
		info.show2 = false
	}
	const plusXing = (str, frontLen, endLen) => {
		var len = str.length - frontLen - endLen;
		var xing = '';
		for (var i = 0; i < len; i++) {
			xing += '*';
		}
		return str.substring(0, frontLen) + xing + str.substring(str.length - endLen);
	}
	// 支付
	const wxPay = async (order_no : any = '') => {
		const res = await order.wxpay({
			order_id: order_no ? order_no : info.order_id
		})
		let payInfo : any = res.data.payRes
		uni.requestOrderPayment({
			...payInfo,
			success(res2 : any) {
				if (res2.code === 200) {
					showMsg('支付成功')
					setTimeout(() => {
						uni.navigateTo({
							url: `/pages/me/friendManager/index?index=1`
						})
					}, 1000)
				}

			},
			fail(err2) {
				if (err2.errMsg === 'requestPayment:fail cancel') {
					showMsg('您已取消支付')
				} else {
					showMsg('支付失败')
				}
			}
		})
		info.show2 = false
	}
	const showMsg = (msg : string) => {
		uni.showToast({
			title: msg,
			icon: 'none'
		})
	}
	const submit = async () => {
		if (!info.radioShow) return showMsg('请阅读同意后勾选协议')
		const res : any = await isAddWechat()
		if(res === 401){
			info.loginPopShow = true
			return
		}
		if (res && res.id) {	//判断是否申请
			if (info.detail.exchange_amount == 0) return uni.navigateTo({
				url: `/pages/me/friendManager/index?index=1`
			})
			wxPay(res.id)
		} else {
			memberCorder()
		}
	}
	//是否已申请加微信
	const isAddWechat = async () => {
		const res = await order.isAddWechat({
			id: info.detail.id
		})
		if(res.code === 401) {
			return res.code
		}
		if (res.code === 200) {
			return res.data
		} else {
			return false
		}
	}
	//申请微信(订单)
	const memberCorder = async () => {
		const res = await order.memberCorder({
			id: info.detail.id
		})
		if (res.code === 200) {
			info.order_id = res.data.order_id
			if (info.detail.exchange_amount == 0) return
			wxPay(res.data.order_id)
		} else {
			showMsg(res.msg)
		}
	}
	//status :0=待支付,1=待审核,3=已退款(拒绝),4=待确认,5=已完成
	const add = async () => {
		if (info.detail.exchange_status) {
			info.show2 = true
		} else {
			info.show = true
		}
	}
	const memberInfo = async (id : string | number) => {
		const res = await home.memberInfo({ id: id })
		if (res.code === 200) {
			info.detail = res.data
		}
	}
	const skip = (url : string) => {
		uni.navigateTo({
			url: url
		})
	}
	// 预览
	const preview = (index : number) => {
		store.commit('IsShare', false)
		uni.previewImage({
			urls: info.detail.images,
			longPressActions: {
				itemList: ['发送给朋友', '保存图片', '收藏'],
				success: function (data) {
					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				},
				fail: function (err) {
					console.log(err.errMsg);
				},
			}
		});
	}
	const sysConfig = async () => {
		const res = await common.sysConfig()
		info.nodes.add_wechat = Number(res.data.add_wechat)
		info.nodes.add_wechat_bottion = Number(res.data.add_wechat_bottion)
	}
	onShow(() => {
		store.commit('IsShare', true)
	})
	onLoad((op) => {
		if (op.id) info.id = op.id
		if (op.otherid) info.id = op.otherid
		memberInfo(info.id)
		sysConfig()
	})
</script>
<style>
	page {
		background: #F8F8F8;
		border: 1px solid #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	:deep(.u-model__content__message) {
		padding: 34rpx 34rpx 60rpx;
	}

	.modal {
		padding: 60rpx 42rpx 0 42rpx;

		.wx {
			width: 100%;
			height: 130rpx;
			border-radius: 10rpx;
			border: 2rpx solid #000000;
			margin: 36rpx 0 60rpx;
			padding: 0 35rpx;
			font-weight: 500;
		}

		.confirm {
			width: 320rpx;
			height: 66rpx;
			background: #000000;
			color: #fff;
			border-radius: 33rpx;
			font-size: 32rpx;
			text-align: center;
			line-height: 66rpx;
		}

		.cancel {
			width: 162rpx;
			height: 66rpx;
			border-radius: 33rpx;
			border: 1rpx solid #979797;
			color: #999999;
			font-size: 32rpx;
			text-align: center;
			line-height: 66rpx;
		}
	}

	.description {
		margin: 20rpx 0 35rpx 0;
	}

	.basis>view:not(.not) {
		margin-bottom: 30rpx;
	}

	.info {
		margin: 20rpx;
		background: #fff;
		padding: 30rpx 28rpx 39rpx 28rpx;
		font-weight: 400;
		

		.info-right {
			margin-left: 14rpx;
		}

		.info-title {
			font-size: 28rpx;
			font-weight: 600;
			// margin-right: 50rpx;
			width: 160rpx;
		}
	}

	.btn {
		width: 100%;
		position: fixed;
		bottom: 40rpx;
		color: #fff;
		font-size: 32rpx;
		z-index: 5;

		.btn-text {
			margin: 0 55rpx;
			background: linear-gradient(180deg, #333333 0%, #626262 100%);
			height: 86rpx;
			border-radius: 10rpx;
			text-align: center;
			line-height: 86rpx;
		}
	}
</style>